<template>
		<map style="width: 100%; height:100vh; " :layer-style='5' 
			:latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
			@callouttap='callouttap'>
				<cover-view class="to" @click="gomapApp(30.353471,114.319719)">发起导航</cover-view>
		</map>
</template>

<script>
		import coordtransform from 'coordtransform'
	export default {
		data() {
			return {
				latitude: null, //纬度
				longitude: null, //经度
				scale: 12, //缩放级别
				bottomData: false,
				key: "2E2BZ-4UHCB-AIUUP-N4V4A-ES347-AUBOV",
				address2:"",
				marker: [
					{
							id: 0,
							latitude:30.353471, //纬度
							longitude: 114.319719, //经度
							iconPath: '', //显示的图标        
							rotate: 0, // 旋转度数
							width: 20, //宽
							height: 30, //高
							alpha: 1, //透明度
							label:{
							       content: '江夏区纸坊街社区卫生服务中心',  //文本
							       color: '#FF0202',  //文本颜色
							       borderRadius: 3,  //边框圆角
							       borderWidth: 1,  //边框宽度
							       borderColor: '#FF0202',  //边框颜色
							       bgColor: '#ffffff',  //背景色
							       padding: 5,  //文本边缘留白
							       textAlign: 'center'  //文本对齐方式。有效值: left, right, center
							     }
					},
					{
						id: 1,
						latitude:null, //纬度
						longitude: null, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						title:'我在这里',//标注点名
						alpha: 1, //透明度
					},
                     
				],
			}
		},
		onLoad() {

		},
		mounted(){
			this.getAddress()
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '90vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		methods: {
			gomapApp(latitude,longitude,name){
			   // let url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${this.key}`;
	             ;
	             	//plus.runtime.openURL(url,function(e){})调起手机APP应用
	              wx.openLocation({
	                  latitude: 30.353471, // 目标纬度
	                  longitude:114.319719, // 目标经度
	                  scale: 18, // 地图缩放级别
	                  name: '江夏区纸坊街社区卫生服务中心', // 地点名称（可选）
	                  address: '湖北省武汉市江夏区纸坊街社区卫生服务中心' // 地址描述（可选）
	              });
	            
			},

			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			getAddress() {
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						console.log("位置获取成功", res);
						// 将 WGS84 坐标转换为 GCJ-02 坐标
						const [gcjLat, gcjLng] = coordtransform.wgs84togcj02(
							res.longitude,
							res.latitude
						);
						this.latitude =  this.marker[0].latitude;
						this.longitude =  this.marker[0].longitude; 
			            this.marker[1].latitude = gcjLng
						 this.marker[1].longitude = gcjLat
						console.log(gcjLat, gcjLng)
						// 地址逆转
						const data = {
							latitude: this.latitude,
							longitude: this.longitude,
							get_poi: 1,
							key: this.key
						};
			
						uni.request({
							url: "http://192.168.5.8:8080/api/test",
							data: data,
							timeout: 3000,
							isHighAccuracy: true,
							method: "GET",
							success: (res) => {
								const data = JSON.parse(res.data.meg)
								console.log(data)
								//console.log(data.data.result.address)
								// this.address2 = data.data.result.formatted_addresses ? data.data
								// 	.result.formatted_addresses.recommend : data.data.result
								// 	.address;
							},
							fail: (erro) => {
								console.log("请求失败", erro);
							}
						});
					},
					fail: (erro) => {
						console.log("位置获取失败", erro);
					},
					complete: () => {}
				});
			},
		}
	}
</script>
<style scoped>
	 .to{
		 width: 250rpx;
		 height: 80rpx;
		 border-radius: 50rpx;
		 display: flex;
		 text-align: center;
		 line-height: 80rpx;
		 color: white;
		 background-color: #81e8ff ;
		 position: fixed;
		 bottom: 200rpx;
		 left: 50%;
		 z-index: 1000;
		 transform: translateX(-50%);
	 }
</style>